<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./../templates/mantenimientoTurno.xhtml"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="title">
        <h:outputText style="font-size: 40px"  styleClass="letraBlanca" value="HOSPITAL DE PRUEBA NUMERO UNO"/>
    </ui:define>
    <ui:define name="datos">




        <h:panelGrid  styleClass="fondoTurno" id="panelDatos">
            <a4j:poll id="poll" interval="10000" action="#{jsfPantalla.cargarListaTurnoXMedico}"  enabled="true" render="poll,mm,atendido,MEDICO" />
            <h:panelGrid columns="2" >
                <h:form >
                    <p:media value="http://www.youtube.com/v/_Nexvw7wlLM" width="820" height="600" player="flash"/>  
                </h:form>
                <h:form id="formDatos">
                    <h:panelGrid width="550px" id="MEDICO" style="color: #666" columnClasses="alinearIzquierda" cellspacing="28"  styleClass="fondoCabecera" >

                        <h:outputText style="font-size: 18px" value="MEDICO: #{jsfPantalla.hcMedico.hcMedico.nombre}" />
                        <h:outputText style="font-size: 18px" value="ESPECIALIDAD: #{jsfPantalla.hcMedico.hcMedico.hcEspecialidad.nombre}" />
                    </h:panelGrid>


                    <center>
                        <h:panelGrid  width="700px" id="mm" >
                            <h:dataTable id="listaSimple" value="#{jsfPantalla.listaDetalle}" var="item"   rows="50">
                                <h:column >
                                    <f:facet name="header">
                                        <h:outputText style="font-size: 20px" value="Turno" />
                                    </f:facet>
                                    <h:outputText style="font-size: 20px" value="#{item.secuencia}"/>
                                </h:column>
                                <h:column >
                                    <f:facet name="header">
                                        <h:outputText style="font-size: 20px" value="Hora de atencion" />
                                    </f:facet>
                                    <h:outputText style="font-size: 20px" value="#{item.hora}">
                                        <f:convertDateTime  pattern="HH:mm"/>
                                    </h:outputText>
                                </h:column>

                                <h:column  >
                                    <f:facet name="header">
                                        <h:outputText style="font-size: 20px" value="Paciente" />
                                    </f:facet>
                                    <h:outputText style="font-size: 20px" value="#{item.hcPaciente.nombre}"/>
                                </h:column> 



                                <f:facet name="footer">
                                    <h:panelGrid rendered="#{jsfPantalla.listaDetalle.size()>15}">
                                        <rich:dataScroller  for="listaSimple" fastStep="10" render="commonStatus" />

                                    </h:panelGrid>    

                                </f:facet>
                            </h:dataTable>
                            <rich:jQuery selector="#listaSimple tr:odd" query="addClass('odd-row')" />
                            <rich:jQuery selector="#listaSimple tr:even" query="addClass('even-row')" />
                            <rich:jQuery selector="#listaSimple tr" query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
                            <rich:jQuery selector="#listaSimple tr" query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
                        </h:panelGrid>
                    </center>    

                </h:form>
            </h:panelGrid>


            <center>
                <h:panelGrid styleClass="fondoSiguiente" style="font-size: 50px" columnClasses="alinearIzquierda"  width="1400px" cellspacing="35"  columns="2">

                    <h:outputText style="color: #666" value=":INGRESE"/>
                    <h:outputText style="color: #666" id="atendido" value="#{jsfPantalla.hcPaciente.hcPaciente.nombre}"/>
                </h:panelGrid>
            </center>



        </h:panelGrid>


    </ui:define>
</ui:composition>
